<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:jsp="http://java.sun.com/JSP/Page">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>动力金融网-CFCA认证的互联网金融公司</title>
    <script type="text/javascript" th:src="@{/js/jquery-1.7.2.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/trafficStatistics.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/share.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}"/>

</head>

<body>
<div id="header">
    <!--<jsp:include page="commons/header.jsp"/>-->
    <div th:include="commons/header :: html"></div>
</div>

<!--散标投资 begin-->
<div id="sbtz" class="invest-details">

    <!--页中begin-->
    <div class="mainBox pro-details-body">
        <div class="homeWap clearfix" id="huacengPar">
            <div class="pro-details-left">

                <!-- 产品详情start -->
                <div class="pro-info-details">
                    <div class="pro-name">
                        <h2><span th:text="|${loanInfo.productName} (${loanInfo.productNo}期)|">季度宝 (20170726期)</span>
                        </h2>
                    </div>
                    <div class="pro-info">
                        <ul class="clearfix">
                            <li class="info-1">
                                <p>历史年化利率</p>
                                <h3 th:text="|${loanInfo.rate}%|">4.9%</h3>
                                <div class="info-bt">
                                    <span>本产品采用普通利率</span>
                                </div>
                            </li>
                            <li class="info-2">
                                <p>募集金额(元)</p>
                                <h3 th:text="|${loanInfo.productMoney}|">500000.0</h3>
                                <div class="info-bt">
                  <span th:if="${loanInfo.productStatus==0}">
                      <span th:text="|募集中,剩余募集金额 ${loanInfo.leftProductMoney}元|">
              		<!-- 只有状态为0时为募集，其它都为已满标 -->
              		募集中,剩余募集金额 500000.0元
                          <!-- 已满标 -->
                    </span>
                  </span>
                                    <span th:if="${loanInfo.productStatus==1}">
                      <span>已满标</span>
                  </span>
                                </div>
                            </li>
                            <li class="info-3">
                                <p>投资周期</p>
                                <!-- 只有新手宝产品周期为天 -->
                                <h3 th:text="|${loanInfo.cycle}个月|">6个月</h3>
                                <div class="info-bt"><span></span></div>
                            </li>
                        </ul>
                    </div>
                    <dl class="pro-syfs">
                        <dt><span>收益获取方式</span></dt>
                        <dd><span>收益返还：</span>到期还本付息</dd>
                    </dl>
                </div>
                <!-- 产品详情end -->

                <!-- 投资记录start -->
                <div class="pro-details-cnt">
                    <ul class="tabNav clearfix">
                        <li><a id="one3" href="javascript:void(0);" class="s">投资记录</a></li>
                    </ul>

                    <div class="invest-record" id="con_one_3" style="display:block">
                        <div class="vertical-side">投资列表</div>
                        <dl id="bidInfoDl" class="record-list">
                            <dt>
                                <span class="record-num">序号</span><span class="invest-user">投资人</span><span
                                    class="invest-money">投资金额(元)</span><span class="invest-time">投资时间</span>
                            </dt>

                            <!-- 如果投资记录为空，显示以下文字 -->
                            <dd style="text-align:center;">该产品暂时还没有人投资，赶快去投资吧~</dd>

                            <!-- 如果有投资记录，循环遍历显示 TODO：这是同步改成异步 -->
                            <!--<dd th:each="bidInfo:${bidInfoList}">
                                <span class="record-num" th:text="${bidInfoStat.count}">1</span>
                                <span class="invest-user"
                                      th:text="|${#strings.substring(bidInfo.user.phone,0,3)}******${#strings.substring(bidInfo.user.phone,9)}|">137******89</span>
                                <span class="invest-money" th:text="${bidInfo.bidMoney}">1000.0</span>
                                <span class="invest-time"
                                      th:text="${#dates.format(bidInfo.bidTime,'yyyy-MM-dd HH:mm:ss')}">2017-09-12 13:34:22</span>
                            </dd>-->
                        </dl>
                        <!-- TODO：页码导航 -->
                        <!--页码 start-->
                        <table class="page_bar">
                            <tbody>
                            <tr>
                                <td id="bidInfoPageTd">
                                    <!--共20条3页　当前为第2页　
                                    <a id="linkHomePage" th:href="@{/loan/BidInfoPage}">首页</a>
                                    <a id="linkPreviousPage" th:href="@{/loan/BidInfoPage}">上一页</a>
                                    <a id="linkNextPage" th:href="@{/loan/BidInfoPage}">下一页 </a>
                                    <a id="linkLastPage" th:href="@{/loan/BidInfoPage}">尾页</a>-->
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <!--页码 end-->
                        <!-- 异步加载bid分页信息 -->
                        <script>
                            $(function () {
                                // 获取路径里面的参数loanId
                                var urlParams = window.location.search;
                                // alert(urlParams);
                                var loanId = urlParams.split("=")[1];
                                bidInfoPage(1, loanId);
                            });

                            /**
                             * 前端异步加载分页 并写入到页面
                             * @param currentPage
                             * @param loanId
                             */
                            function bidInfoPage(currentPage, loanId) {

                                // 每次调用清空原来缓存
                                $(".bidInfoClass").remove();
                                $("#bidInfoPageTd").empty();

                                // global改为false全局刷新
                                var data = {currentPage: currentPage, loanId: loanId};
                                $.ajax({
                                    type: "GET",
                                    url: "/005-money-web/loan/BidInfoPage",
                                    data: data,
                                    Global: false,
                                    success: function(data) {
                                        // 将bid信息写入页面
                                        $(data.bidInfoList).each(function (i, bidInfo) {
                                            var phone = bidInfo.user.phone;
                                            phone = phone.substring(0, 3) + "******" + phone.substring(9);
                                            var bidTime = bidInfo.bidTime;
                                            // bidTime = bidTime.format("yyyy-MM-dd hh:mm:ss");     这个不可以，配置jackson解决
                                            $("#bidInfoDl").append(
                                                "<dd class='bidInfoClass'>\n" +
                                                // "<span class=\"record-num\">" + (i+1) + "</span>\n" +
                                                // 便于区分改为bidInfo.id
                                                "<span class=\"record-num\">" + bidInfo.id + "</span>\n" +
                                                "<span class=\"invest-user\">" + phone + "</span>\n" +
                                                "<span class=\"invest-money\">" + bidInfo.bidMoney + "</span>\n" +
                                                "<span class=\"invest-time\">" + bidTime + "</span>\n" +
                                                "</dd>");
                                        });

                                        // 将pageModel信息写入页面
                                        var pageModel = data.pageModel;
                                        $("#bidInfoPageTd").append(
                                            "共" + pageModel.total + "条" + pageModel.lastPage + "页　当前为第" + pageModel.currentPage + "页　\n" +
                                            "<a id=\"linkHomePage\" onclick=\"bidInfoPage(1, " + loanId + ")\">首页</a>\n" +
                                            "<a id=\"linkPreviousPage\" onclick=\"bidInfoPage(" + (pageModel.currentPage - 1) + ", " + loanId + ")\">上一页</a>\n" +
                                            "<a id=\"linkNextPage\" onclick=\"bidInfoPage(" + (pageModel.currentPage + 1) + ", " + loanId + ")\">下一页 </a>\n" +
                                            "<a id=\"linkLastPage\" onclick=\"bidInfoPage(" + pageModel.lastPage + ", " + loanId + ")\">尾页</a>");
                                    }
                                });

                            }
                        </script>

                    </div>
                </div>
                <!-- 投资记录end -->
            </div>

            <!--页面右侧begin-->
            <div class="pro-details-right">
                <div class="right-calculator" id="huaceng">
                    <div class="calculator-cnt">
                        <h2>立即投资</h2>
                        <dl class="profits-mode">
                            <dt>收益获取方式</dt>
                            <dd class="clearfix"><span id="fanhuan"><em>到期还本付息</em></span></dd>
                        </dl>
                        <dl class="usable">
                            <dt>我的账户可用</dt>
                            <dd>资金(元)：
                                <!-- 判断用户是否登录：未登录，显示登录连接 -->
                                <span id="invest-login" style="font-size:18px;color:#ff6161;vertical-align:bottom;">
                                    <a th:href="@{/loan/page/login}">请登录</a>
                                </span>
                                <!-- 判断用户是否登录：已登录，显示可用余额 -->
                                <!--<span style="font-size:18px;color:#ff6161;vertical-align:bottom;">1,000,12 元</span>-->
                            </dd>
                        </dl>
                        <div class="expect-box">
                            <div class="expect-money">预计本息收入(元)：<span id="shouyi" class="money"></span><span
                                    class="prompt" style="display:block;">请在下方输入投资金额</span></div>
                            <input type="text" id="bidMoney" name="bidMoney" onblur="checkMoney();"
                                   placeholder="请输入投资金额，应为100元的整倍数" maxlength="9"/>
                            <div class="max-invest-money" id="max-invest-money"></div>
                        </div>
                        <div class="invest-btn">
                            <a id="investNow" href="javascript:void(0)" class="btn-1" onclick="invest();">立即投资</a>
                        </div>

                        <input type="hidden" id="loanId" name="loanId" value="${loanInfo.id}"/>
                        <!-- 隐藏标签到页面，便于拿到session的值 -->
                        <div th:if="${session.loginUser!=null}">
                            <!-- 是否登录 -->
                            <input type="hidden" id="loginUser" th:value="${session.loginUser}"/>
                            <!-- 是否实名认证 -->
                            <input type="hidden" id="loginUserName" th:value="${session.loginUser.name}"/>
                        </div>

                    </div>
                </div>
            </div>
            <!--页面右侧end-->
        </div>
    </div>
    <!--页中end-->

</div>
<!--散标投资 end-->

<!--遮罩层-->
<div class="dialog-overlay" id="dialog-overlay1" style="display:none;"></div>

<!--投资成功浮层start-->
<div class="layer-body failureSuccess failurePayment" id="failurePayment"
     style="display:none;width:500px;height:100px;top:75%;">
    <a class="layer-close" href="javascript:closeit();"></a>
    <div style="background:#f2f2f2; line-height:105px;text-align:center;"><font style="font-size:25px;">投资成功</font>
    </div>
</div>
<!--投资成功浮层end-->

<!--页脚start-->
<jsp:include page="commons/footer.jsp"/>
<!--页脚end-->

<script type="text/javascript">
    function closeit() {
        $("#failurePayment").hide();
        $("#dialog-overlay1").hide();
        window.location.href = "${pageContext.request.contextPath}/loan/myCenter";
    }
</script>

<script th:inline="javascript">
    // session的不好取，model的好取
    var loanId = [[${loanInfo.id}]];
    var productName = [[${loanInfo.productName}]];
    var rate = [[${loanInfo.rate}]];
    var cycle = [[${loanInfo.cycle}]];
    var productType = [[${loanInfo.productType}]];
    var bidMinLimit = [[${loanInfo.bidMinLimit}]];
    var bidMaxLimit = [[${loanInfo.bidMaxLimit}]];
    var leftProductMoney = [[${loanInfo.leftProductMoney}]];

    $(function () {
        var loginUser = $("#loginUser").val();
        if (loginUser == null || loginUser == "") {
            $("#invest-login").html("<a href=" + rootPath + "/loan/page/login?redirectURL=" + redirectURL + ">请登录</a>");
        }else {
            $.get(rootPath + "/loan/page/FinanceAccount", function (data) {
                if (data.code == 0) {
                    alert(data.message)
                }else {
                    $("#invest-login").html(data.message + " 元");
                }
            });
        }
    });

    /**
     * 1、校验投资金额：数据检验
     */
    function checkMoney() {
        // 每次清空一下
        $("#max-invest-money").html("");

        var bidMoney = $.trim($("#bidMoney").val());
        if (bidMoney == null || bidMoney == "") {
            $("#max-invest-money").html("投资金额不能为空");
            return false;
        }
        if (!/^[0-9]*$/.test(bidMoney)) {
            $("#max-invest-money").html("投资的金额必须是数字");
            return false;
        }
        if (bidMoney <= 0) {
            $("#max-invest-money").html("投资的金额必须大于0");
            return false;
        }
        if (bidMoney % 100 != 0) {
            $("#max-invest-money").html("投资的金额必须是100的整数倍");
            return false;
        }

        // 计算利息
        var income;
        if (productType == 0) {     // 新手宝是按天计算
            income = bidMoney * rate / 100 / 365 * cycle;
        }else {     // 另外两个是按月
            income = bidMoney * rate / 100 / 365 * cycle * 30;
        }
        $("#shouyi").html(income.toFixed(2));
        return true;
    }

    /**
     * 2、投资前校验：登录校验、业务校验
     */
    function invest() {

        if (checkMoney()) {
            var bidMoney = $.trim($("#bidMoney").val());
            var loginUser = $("#loginUser").val();
            var loginUserName = $("#loginUserName").val();
             // 验证是否登录
                if (loginUser == null || loginUser == "") {
                    $("#max-invest-money").html("请<a style='color: blue' " +
                        "href=" + rootPath + "/loan/page/login?redirectURL=" + redirectURL + ">登录</a>后再投资");
                    return;
                }
                // 验证是否实名认证
                if (loginUserName == null || loginUserName == "") {
                    $("#max-invest-money").html("请<a style='color: blue' " +
                        "href=" + rootPath + "/loan/page/register/toRealName?redirectURL=" + redirectURL + ">实名认证</a>后再投资");
                    return;
            }
            // 业务验证：验证投资金额是可以投资的        业务验证放到后台
            bidMoney = window.parseInt(bidMoney);      // 字符串变为数字便于比较
            bidMinLimit = parseInt(bidMinLimit);
            bidMaxLimit = parseInt(bidMaxLimit);
            leftProductMoney = parseInt(leftProductMoney);
            // 超过投资上下限
            if (bidMoney < bidMinLimit || bidMoney > bidMaxLimit) {
                $("#max-invest-money").html("投资的金额必须在" + bidMinLimit + "-" + bidMaxLimit + "之间");
                return;
            }
            // 超过剩余募集金额
           /* if (bidMoney > leftProductMoney) {
                $("#max-invest-money").html("投资金额已超过剩余募集金额：" + leftProductMoney);
                return;
            }*/

            $.post(rootPath + "/bid/invest", {loanId: loanId, bidMoney: bidMoney},
                function (data) {
                    if (data.code == 0) {
                        alert(data.message)
                    }else {
                        alert("投资成功");
                    }
                });


        }

    }


</script>
</body>
</html>